<template>
  <div
    v-loading="loading"
    class="main-container">
    <filtrate-handle-view
      title="采购汇总分析"
      class="filtrate-bar"
      module-type="customer"
      @load="loading=true"
      @change="searchClick">
      <!-- <div slot="append">
        <el-input
          v-model="keywords"
          placeholder="请输入产品名称"
          class="search-box" />
      </div> -->
    </filtrate-handle-view>
    <div class="content">
      <div class="axis-content">
        <div id="axismain"/>
      </div>
      <div class="table-content">
        <el-table
          :data="list"
          :summary-method="getSummaries"
          :cell-class-name="cellClassName"
          height="400"
          show-summary
          stripe
          border
          highlight-current-row
          @row-click="handleRowClick"
          @sort-change="({ prop, order }) => mixinSortFn(list, prop, order)">
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.field"
            :label="item.name"
            :sortable="item.sortable"
            :formatter="item.formatter || null"
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip />
        </el-table>
      </div>
    </div>

    <list-view
      v-if="showListView"
      :config="listConfig"
      @close="showListView = false" />
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/7/8 0008
 */
import {
  jxcPurchasingStatisticsAPI,
  jxcPurchaseStatisticsListAPI,
  jxcPurchaseStatisticsRetreatListAPI,
  jxcPurchaseStatisticsSupplierListAPI,
  jxcPurchaseStatisticsSupplierRetreattListAPI
} from '@/api/bi/jxc'

import BaseMixin from '../../mixins/Base'
import SortMixin from '../../mixins/Sort'
import echarts from 'echarts'
import JxcMixin from '../JxcMixin'

export default {
  name: 'PurchaseAllStatistics',
  mixins: [BaseMixin, SortMixin, JxcMixin],
  data() {
    return {
      loading: false,
      requestParams: {},

      list: [],
      fieldList: [
        { field: 'time', name: '月份', sortable: true },
        { field: 'purchaseCount', name: '采购订单数', sortable: true, canVisit: true },
        { field: 'retreatCount', name: '采购退货数', sortable: true, canVisit: true },
        { field: 'purchaseSupplierCount', name: '采购供应商数', sortable: true, canVisit: true },
        { field: 'retreatSupplierCount', name: '退货供应商数', sortable: true, canVisit: true },
        { field: 'purchaseTotal', name: '采购金额', sortable: true, isMoney: true },
        { field: 'retreatTotal', name: '退货金额', sortable: true, isMoney: true },
        { field: 'total', name: '金额小计', sortable: true, isMoney: true }
      ],

      chartOption: {}
    }
  },
  created() {
    this.chartOption = this.getChartOption()
  },
  mounted() {
    this.initAxis()
  },
  methods: {
    /**
     * 获取
     */
    getChartOption() {
      return {
        tooltip: {
          trigger: 'axis'
        },
        color: this.chartColors,
        legend: {
          data: ['采购订单数', '采购退货数', '采购金额', '退货金额'],
          bottom: 0
        },
        grid: {
          top: 50
        },
        xAxis: {
          ...this.chartXAxisStyle,
          type: 'category',
          data: []
        },
        yAxis: [
          {
            ...this.chartYAxisStyle,
            name: '采购订单数/采购退货数',
            type: 'value'
          },
          {
            ...this.chartYAxisStyle,
            name: '采购金额/退货金额',
            type: 'value'
          }
        ],
        series: []
      }
    },

    getDataList(params) {
      this.requestParams = params
      this.loading = true
      jxcPurchasingStatisticsAPI(params).then(res => {
        this.loading = false
        const resData = res.data || []
        this.list = resData

        this.chartOption.xAxis.data = this.list.map(o => o.time)
        this.chartOption.series = [
          {
            name: '采购订单数',
            data: this.list.map(o => {
              return {
                name: o.time,
                value: o.purchaseCount
              }
            }),
            type: 'line',
            yAxisIndex: 0
          },
          {
            name: '采购退货数',
            data: this.list.map(o => {
              return {
                name: o.time,
                value: o.retreatCount
              }
            }),
            type: 'line',
            yAxisIndex: 0
          },
          {
            name: '采购金额',
            data: this.list.map(o => {
              return {
                name: o.time,
                value: o.purchaseTotal
              }
            }),
            type: 'line',
            yAxisIndex: 1
          },
          {
            name: '退货金额',
            data: this.list.map(o => {
              return {
                name: o.time,
                value: o.retreatTotal
              }
            }),
            type: 'line',
            yAxisIndex: 1
          }
        ]

        this.initAxis()
      }).catch(() => {
        this.loading = false
      })
    },
    initAxis() {
      if (!this.chartObj) {
        this.chartObj = echarts.init(document.getElementById('axismain'))
      }
      this.chartObj.setOption(this.chartOption, true)
    },
    searchClick(data) {
      this.getDataList({
        ...data
      })
    },

    handleRowClick(row, column) {
      const fieldItem = this.fieldList.find(item => item.field === column.property)
      if (fieldItem && fieldItem.canVisit) {
        this.listConfig = {
          title: `采购汇总分析-${column.label}`,
          placeholder: {
            purchaseCount: '请输入采购单编号/供应商名称',
            retreatCount: '请输入退货单号/供应商名称',
            purchaseSupplierCount: '请输入供应商名称/联系人/电话',
            retreatSupplierCount: '请输入供应商名称/联系人/电话'
          }[column.property],
          showSearch: true,
          type: {
            purchaseCount: 'jxc_purchase',
            retreatCount: 'jxc_retreat',
            purchaseSupplierCount: 'jxc_supplier',
            retreatSupplierCount: 'jxc_supplier'
          }[column.property],
          request: {
            purchaseCount: jxcPurchaseStatisticsListAPI,
            retreatCount: jxcPurchaseStatisticsRetreatListAPI,
            purchaseSupplierCount: jxcPurchaseStatisticsSupplierListAPI,
            retreatSupplierCount: jxcPurchaseStatisticsSupplierRetreattListAPI
          }[column.property],
          params: {
            ...this.requestParams,
            time: row.time
          }
        }
        this.showListView = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../styles/detail.scss';
</style>
